<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园首页</title>
    <!-- 引入标题图标 -->
    <link rel="shortcut icon" href="../../assets/image/logo_small.jpg" type="image/x-icon">
    <!-- 引入bootstrap核心css -->
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- 引入bootstrap核心图标css -->
    <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <!-- 引入自定义css -->
    <link rel="stylesheet" href="./index.css">
    <!-- 引入bootstrap核心js -->
    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入jQuery核心js -->
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 引入jQuery-form.js  clearForm() -->
    <script src="../../node_modules/jquery-form/dist/jquery.form.min.js"></script>
    <!-- 引入jQuery扩展插件:根据json对象回显form表单 -->
    <script src="../../assets/js/jquery.common.js"></script>
    <!-- jQuery的扩展js  serializeObject()用的此插件-->
    <script src="../../assets/js/jquery.jdirk.js"></script>

    <script>

        function list(){
            $.ajax({
                url:"http://localhost:8080/teacher", //请求后端的url地址
                "headers":{
                  "access-token":localStorage.getItem("token")
                },
                type:"patch", //请求方式
                success:function(result){ //回调函数
                    if(result.success){
                        //清空id为teacher-tbody下面所有的 内容
                        $("#teacher-tbody").empty();
                        //获取数据
                        var data = result.data;
                        //循环遍历数组
                        $.each(data,function(i,v){
                            $("#teacher-tbody").append("<tr>"
                                +"<td>"+(i+1)+"</td>"
                                +"<td>"+v.name+"</td>"
                                +"<td>"+v.age+"</td>"
                                +"<td>"+(v.sex?'男':'女')+"</td>"
                                +"<td>"+v.position+"</td>"
                                +"<td>"+v.subject+"</td>"
                                +"<td>"
                                    +"<button data-teacher="+JSON.stringify(v)+" edit type='button' class='btn btn-primary  btn-sm'>修改</button>&nbsp;"
                                    +"<button data-bs-toggle='modal' delete  data-id="+v.id+" type='button' class='btn btn-success btn-sm' data-bs-target='#staticBackdrop' >删除</button>"
                                +" </td>"
                           +"</tr>")
                        });
                    }else{
                      //如果状态码为401就证明你无权访问目标方法,跳转到登录界面
                      if(result.code==401){
                           location.href = "../login/login.html";
                      }
                    }

                }
            });

        }
        // 当页面结构加载完毕之后,执行匿名函数中的内容
        $(function(){
            /* 
            $.get(url,参数,function(result){

            })
            2种写法指的是一个意思
            $.ajax({
                url:url,
                type:"get",
                success:function(result){

                }
            })
            */
            list();
            
            //给id为teacher-tbody下面所有的button标签具有delete属性都注册一个点击事件(删除按钮)
            $("#teacher-tbody").on("click","button[delete]",function(){
                //删除按钮对应的jQuery对象
                var buttonJQuery = $(this);
                //获取id的值
                var id = buttonJQuery.data("id");
                //注册事件前,先注销确认按钮事件
                $("#confirm-button").off();

                //给确认按钮注册一个点击事件
                $("#confirm-button").on("click",function(){
                    // 
                    //发送ajax请求
                    $.ajax({
                        "url":"http://localhost:8080/teacher/"+id,
                        "headers":{
                          "access-token":localStorage.getItem("token")
                        },
                        "type":"delete",
                        "success":function(result){
                            //关闭模态框
                            $("#staticBackdrop").modal("hide");
                            //如果删除成功
                            if(result.success){
                                //删除当前行的tr,并且模态框
                               var tr = buttonJQuery.closest("tr");
                               //删除tr标签
                               tr.remove();
                             
                            }else{
                              //如果状态码为401就证明你无权访问目标方法,跳转到登录界面
                                if(result.code==401){
                                    location.href = "../login/login.html";
                                    return;
                                }
                                //显示模态框
                                $("#tipMessageBox").modal("show");
                                //设置错误信息
                                $("#tipMessage").html(result.message);
                            }
                        }
                    });

                })
            });
       
            //给提示框按钮注册一个事件
            $("#tip-confirm-button").on("click",function(){
                $("#tipMessageBox").modal("hide");
            });
       
            //给新增按钮注册一个点击事件
            $("#addButton").on("click",function(){
                //展示新增的模态框
                $("#addFormModal").modal("show");
                //动态设置标题
                $("#addFormTitle").html("新增教师");

                //清空form表单  方式1用法, 不爽之处:如果有100个字段呢,要一个个设置,麻烦
                // $("#name").val("");
                // $("#age").val("");
                // $("#boy").prop("checked",true);
                // $("#position").val("");
                // $("#subject").val("");
                //采用插件的方式(隐藏域组件是清空不了的)
                $("#addForm").clearForm();
                //所以手动清空
                $("input[name='id']").val("");
                //针对于特殊标签,单独设置即可
                $("#boy").prop("checked",true);//默认选中性别为男

            })
            //给id为teacher-tbody下面所有的button标签具有edit属性都注册一个点击事件(删除按钮)
            $("#teacher-tbody").on("click","button[edit]",function(){

                //先清空form表单
                $("#addForm").clearForm();

                //获取老师对象
                var teacher = $(this).data("teacher");
                
                
                //修改教师信息
                $("#addFormTitle").html("修改教师信息");
             
                //单选框/复选框不能进行回显
                teacher.sex?$("#boy").prop("checked",true):$("#girl").prop("checked",true);

                $("#addForm").setForm(teacher);
              
                $("#addFormModal").modal("show");
            });
            //给新增或者修改按钮注册一个点击事件
            $("#saveOrUpdateButton").on("click",function(){
                //把form表单中的数据直接封装成一个json对象(它的规则:name为key,你填写的值为value)
               var jsonObject =  $("#addForm").serializeObject();
                //发送ajax请求
                $.ajax({
                    "url":"http://localhost:8080/teacher",
                    "headers":{
                      "access-token":localStorage.getItem("token")
                    },
                    "data":JSON.stringify(jsonObject),
                    "contentType":"application/json",
                    "type":"put",
                    "success":function(result){
                        //如果成功,关闭模态框,并且刷新列表
                        if(result.success){
                            //关闭模态框
                            $("#addFormModal").modal("hide");
                            //刷新列表
                            list();
                        }else{
                            //如果状态码为401就证明你无权访问目标方法,跳转到登录界面
                            if(result.code==401){
                                location.href = "../login/login.html";
                                return;
                            }
                             //显示模态框
                             $("#tipMessageBox").modal("show");
                            //设置错误信息
                            $("#tipMessage").html(result.message);
                        }
                    }

                })

            });
        
           
            //给导出注册一个点击事件
            $("#export").on("click",function(){
            
                var token  = localStorage.getItem("token")?localStorage.getItem("token"):"";
                window.location.href = "http://localhost:8080/teacher/export?type=0&access-token="+token;
            })
            //给导入按钮注册一个事件
            $("#import").on("click",function(){
                 $("#importForm").clearForm();
                $("#importModal").modal("show");
            });

            //给导入按钮注册一个点击事件
            $("#excel-import-button").on("click",function(){
                $("#importForm").ajaxSubmit({
                    "headers":{
                      "access-token":localStorage.getItem("token")
                    },
                    "success":function(result){
                        if(result.success){
                           $("#importModal").modal("hide");
                           list();
                        }else{
                          //如果状态码为401就证明你无权访问目标方法,跳转到登录界面
                            if(result.code==401){
                                location.href = "../login/login.html";
                                return;
                            }
                            //显示模态框
                            $("#tipMessageBox").modal("show");
                            //设置错误信息
                             $("#tipMessage").html(result.message);
                        }                 
                    }
                });
            })
        })


    </script>
</head>
<body>

    <header class="container-fluid border-bottom">
        <div class="container" style="height: 100px; ">

            <div class="row">
                <div class="col-md-3 d-flex align-items-center" style="height: 100px;padding: 0px">
                    <img class="logo" src="../../assets/image/logo_small.jpg" alt="">
                    <div class="ms-3 fs-3">源码智慧校园</div>
                </div>
                <div class="col-md-9 d-flex align-items-center justify-content-between"  style="height: 100px;">
                    <!-- 输入组 -->
                    <div class="input-group"  style="width: 250px;">
                        <span class="input-group-text" id="basic-addon1">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="搜索..." aria-label="Username" aria-describedby="basic-addon1">
                    </div>

                    <div class="dropdown">
                        <img src="../../assets/image/head.jpg" class="dropdown-user" alt="">
                        <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            张根硕
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">系统信息</a></li>
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                   </div>
                
                </div>


            </div>


        </div>

    </header>
    <main class="container-fluid">
        <div class="row">
            <div class="col-md-3" style="padding: 0px;" >
                <ul class="nav flex-column nav-underline text-center border-end" style="min-height: 100vh;">
                    <li class="nav-item border-bottom">
                      <a class="nav-link" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item border-bottom">
                      <a class="nav-link" href="#">老师信息管理</a>
                    </li>
                    <li class="nav-item border-bottom">
                      <a class="nav-link" href="#">学生信息管理</a>
                    </li>
                </ul>
            
            </div>
            <div class="col-md-9 p-0">
                <table class="table  table-striped  table-hover  text-center">
                    <thead>
                      <tr>
                        <th scope="col">编号</th>
                        <th scope="col">姓名</th>
                        <th scope="col">年龄</th>
                        <th scope="col">性别</th>
                        <th scope="col">职位</th>
                        <th scope="col">学科</th>
                        <th scope="col">
                            操作
                            <button type="button" id="addButton" class="btn btn-info   ms-1 btn-sm">新增</button>
                            <button type="button" id="import" class="btn btn-primary ms-1 btn-sm">
                                导入
                            </button>
                            <button type="button" id="export" class="btn btn-primary ms-1 btn-sm">
                                导出
                            </button>
                        </th>
                      </tr>
                    </thead>
                    <tbody id="teacher-tbody">
                      <tr>
                        <th>1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <th>1</th>
                        <td>Mark</td>
                        <td>
                            <button type="button" class="btn btn-primary  btn-sm">修改</button>
                            <button type="button" class="btn btn-success  btn-sm">删除</button>
                        </td>
                      </tr>
                      <tr>
                        <th>2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>
                            <button type="button" class="btn btn-primary  btn-sm">修改</button>
                            <button type="button" class="btn btn-success  btn-sm">删除</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>


            </div>
        </div>

    </main>

  
  <!-- 确认是否删除模态框 -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          您确认删除吗?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="confirm-button">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 消息提示信息模态框 -->
  <div class="modal fade" id="tipMessageBox" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="tipMessage" style="color: red;">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="tip-confirm-button">确定</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 新增和修改对应的模态框 -->
  <div class="modal fade" id="addFormModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="addFormTitle">提示</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="" id="addForm">
                <!-- 隐藏域 -->
                <input type="hidden" name="id">

                <div class="mb-3 row">
                   <label for="name" class="col-md-2 col-form-label  text-end">姓名</label>
                   <div class="col-md-10">
                     <input type="text" name="name"  class="form-control" id="name" >
                   </div>
                 </div>
                 <div class="mb-3 row">
                   <label for="age" class="col-md-2 col-form-label text-end">年龄</label>
                   <div class="col-md-10">
                     <input type="text" name="age" class="form-control" id="age">
                   </div>
                 </div>
                 <div class="mb-3 row">
                   <label  class="col-md-2 col-form-label text-end">性别</label>
                   <div class="col-md-10">
                       <div class="form-check">
                           <input class="form-check-input" type="radio" value="true" checked name="sex" id="boy">
                           <label class="form-check-label" for="boy">
                             男
                           </label>
                         </div>
                         <div class="form-check">
                           <input class="form-check-input" type="radio" value="false" name="sex"  id="girl">
                           <label class="form-check-label" for="girl">
                             女
                           </label>
                         </div>
                   </div>
                 </div>
                 <div class="mb-3 row">
                   <label for="position" class="col-md-2 col-form-label text-end">职位</label>
                   <div class="col-md-10">
                     <input type="text" name="position" class="form-control" id="position">
                   </div>
                 </div>
                 <div class="mb-3 row">
                   <label for="subject" class="col-md-2 col-form-label text-end">学科</label>
                   <div class="col-md-10">
                     <input type="text" name="subject" class="form-control" id="subject">
                   </div>
                 </div>
            </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="saveOrUpdateButton">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 导入模态框 -->
<div class="modal" tabindex="-1" id="importModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">导入</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="importForm" method="post" action="http://localhost:8080/teacher/importExcel" enctype="multipart/form-data">
            <input class="form-control form-control-sm" name="file" id="formFileSm" type="file">
            <div class="modal-footer">
              <a class="btn btn-primary me-4" href="http://localhost:8080/teacher/downloadTemplate" role="button">下载模板</a>
              <a type="button" id="excel-import-button" class="btn btn-primary">提交</a>
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
            </div>
          </form>
        </div>
  
      </div>
    </div>
  </div>
</body>
</html>